import React, { Component } from 'react'
import { Carousel } from 'antd-mobile'
import { withRouter } from 'react-router-dom'

import { BASE_URL } from '../../../../assets/js/constant'
import { getSwiperData } from '../../../../network/home'
import { getCurrCity } from '../../../../utils'

import './index.scss'
class Swiper extends Component {
  state = {
    swiperData: [],
    isLoaded: false,
    currCityName: '上海'
  }

  componentDidMount() {
    this.getSwiperData()
    this.getCityInfo()
  }

  // 获取轮播图数据
  getSwiperData = async () => {
    const res = await getSwiperData('/home/swiper')
    this.setState({ swiperData: res.body, isLoaded: true })
  }

  // 获取城市信息
  getCityInfo = async () => {
    const currCity = await getCurrCity()
    this.setState({ currCityName: currCity.label })

  }

  // 渲染轮播图
  renderSwiper() {
    return this.state.swiperData.map(item => (
      <a
        key={item.id}
        href="http://www.alipay.com"
        style={{ display: 'inline-block', width: '100%', height: 212 }}
      >
        <img
          src={`${BASE_URL}${item.imgSrc}`}
          alt={item.alt}
          style={{ width: '100%', verticalAlign: 'top' }}
        />
      </a>
    ))
  }

  render() {

    return (
      <div style={{ height: '212px', position: 'relative' }} >
        {this.state.isLoaded ? <Carousel autoplay infinite>
          {this.renderSwiper()}
        </Carousel> : ''}

        <div className="top-nav">
          <span className="location" onClick={() => this.props.history.push('/citylist')}>
            {this.state.currCityName}
            <i className="iconfont icon-arrow" />
          </span>
          <span className="search" onClick={() => this.props.history.push('/search')}>
            <i className="iconfont icon-seach" />
            &nbsp;请输入小区名称
          </span>
          <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')}></i>
        </div>
      </div >
    )
  }
}


export default withRouter(Swiper)